<template>
  <div class="bar">
    <a-row type="flex" :gutter="[8, 8]">
      <a-col>
        <div class="itemWrap">
          <div class="label"><span>时间选择</span></div>
          <div class="separator"><span>:</span></div>
          <div class="content">
            <a-range-picker v-model="rangeTime" @change="onTimeChange" />
          </div>
        </div>
      </a-col>

      <a-col>
        <div class="itemWrap">
          <div class="label"><span>合同号</span></div>
          <div class="separator"><span>:</span></div>
          <div class="content">
            <a-input
              class="search-input"
              v-model="search.contractCode"
              allow-clear
            />
          </div>
        </div>
      </a-col>

      <a-col>
        <div class="itemWrap">
          <div class="label"><span>客户名</span></div>
          <div class="separator"><span>:</span></div>
          <div class="content">
            <a-input
              class="search-input"
              v-model="search.customerName"
              allow-clear
            />
          </div>
        </div>
      </a-col>

      <a-col>
        <div class="itemWrap">
          <div class="label"><span>SN号</span></div>
          <div class="separator"><span>:</span></div>
          <div class="content">
            <a-input class="search-input" v-model="search.macSN" allow-clear />
          </div>
        </div>
      </a-col>

      <a-col>
        <div class="itemWrap">
          <div class="label"><span>IPC号</span></div>
          <div class="separator"><span>:</span></div>
          <div class="content">
            <a-input
              class="search-input"
              v-model="search.ipcCode"
              allow-clear
            />
          </div>
        </div>
      </a-col>

      <a-col>
        <div class="itemWrap">
          <div class="label"><span>系统编号</span></div>
          <div class="separator"><span>:</span></div>
          <div class="content">
            <a-input class="search-input" v-model="search.macNO" allow-clear />
          </div>
        </div>
      </a-col>

      <a-col>
        <div class="itemWrap">
          <div class="label"><span>数控系统型号</span></div>
          <div class="separator"><span>:</span></div>
          <div class="content">
            <a-input class="search-input" v-model="search.macModel" allow-clear />
          </div>
        </div>
      </a-col>

      <!-- <a-col>
        <div class="itemWrap">
          <div class="label"><span>伺服电机</span></div>
          <div class="separator"><span>:</span></div>
          <div class="content">
            <a-input
              class="search-input"
              v-model="search.elecModel"
              allow-clear
            />
          </div>
        </div>
      </a-col>
      <a-col>
        <div class="itemWrap">
          <div class="label"><span>伺服驱动</span></div>
          <div class="separator"><span>:</span></div>
          <div class="content">
            <a-input
              class="search-input"
              v-model="search.servoModel"
              allow-clear
            />
          </div>
        </div>
      </a-col> -->

      <a-col>
        <div class="itemWrap">
          <a-checkbox :checked="!search.partCheckFlag" @change="checkBoxChange">
            成套检测
          </a-checkbox>
          <!-- <a-button
            style="margin-left: 8px;"
            :type="!search.partCheckFlag ? 'primary' : ''"
            @click="search.partCheckFlag = !search.partCheckFlag"
          >
            成套检测
          </a-button> -->
        </div>
      </a-col>

      <a-col push="0" style="text-align: right;">
        <!-- <a-button type="primary" style="margin-right: 8px;" @click="expandForm">
          <a-icon :type="expand ? 'left' : 'right'" />
        </a-button> -->
        <a-button
          type="primary"
          style="margin-right: 8px;"
          @click="searchData()"
        >
          搜索
        </a-button>
        <a-button type="primary" @click="restSearchData()">
          重置
        </a-button>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { getRoleId } from "@/unit/tool";
import { RepairType } from "@/unit/constantValue";
import { WarrantyType } from "@/unit/constantValue";
import moment from "moment";

export default {
  name: "ServiceStatistics",
  components: {},
  props: {
    initData: Object
  },
  data() {
    return {
      userName: "",
      name: "",
      role: "",
      compId: "",
      expand: false,
      rangeTime: [],
      statusLists: [],
      warrantyStatusLists: WarrantyType,
      search: {
        beginTime: "",
        endTime: "",
        contractCode: "",
        customerName: "",
        macSN: "",
        ipcCode: "",
        macNO: "",
        macModel: "",
        partCheckFlag: 0,
        elecModel: "",
        servoModel: ""
      }
    };
  },
  watch: {
    initData: {
      immediate: true,
      handler: function(val) {
        let { rangeTime, ...rest } = val;
        this.search = { ...rest };
        this.rangeTime = rangeTime;
      }
    }
  },
  methods: {
    // 选择保修类型;
    handleWarrantyStatusChange(value) {
      this.search.warrantyStatus = value;
    },
    //导出
    getProductsByParam(){
      api.getProductsByParam
    },
    buildTypeLists() {
      this.statusLists = RepairType;
    },

    onTimeChange(e) {
      console.log("change", e);
      let [beginTime, endTime] = e;
      if (e.length > 0) {
        this.search.beginTime = `${moment(beginTime).format(
          "YYYY-MM-DD"
        )} 00:00:00`;
        this.search.endTime = `${moment(endTime).format(
          "YYYY-MM-DD"
        )} 23:59:59`;
      } else {
        this.search.beginTime = "";
        this.search.endTime = "";
      }
    },
    checkBoxChange(e) {
      if (e.target.checked) {
        this.search.partCheckFlag = 0;
      } else {
        this.search.partCheckFlag = 1;
      }
    },

    expandForm() {
      this.expand = !this.expand;
    },
    searchData() {
      this.$emit("emitSearchData", {
        ...this.search,
        rangeTime: this.rangeTime
      });
    },
    restSearchData() {
      let { rangeTime, ...rest } = this.initData;
      this.search = { ...rest };
      this.rangeTime = rangeTime;
    }
  },
  created() {},
  mounted() {
    getRoleId(this);
    this.buildTypeLists();
  },
  computed: {}
};
</script>

<style scoped="scoped">
.bar {
  width: 100%;
  background-color: #ffffff;
  border: 1px solid #e8e8e8;
  padding: 16px 16px 16px 16px;
}

.itemWrap {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}

.itemWrap > .label {
  min-width: 86px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #646464;
  text-align: right;
}

.itemWrap > .separator {
  padding: 0px 4px;
}

.itemWrap > .content {
  width: 100%;
  padding: 0px 1px;
}
.search-input {
  width: 120px;
}
</style>
